<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo</title>
  <link rel="stylesheet" href="./index.css">
</head>
<body data-theme="dark">
  <div class="header"></div>
  <div class="main">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem mollitia eligendi voluptatibus error sed ratione, officiis obcaecati aperiam soluta, id cum similique rerum ex nulla aspernatur consequatur at iusto tenetur?
  </div>
  <div class="bottom"></div>

  <button id="change">切换</button>

  <script>
    const body = document.body
    const btn = document.getElementById('change')
    btn.addEventListener('click', () => {
      const theme = body.getAttribute('data-theme')
      body.setAttribute('data-theme', theme === 'dark' ? 'light' : 'dark')
    })
  </script>
</body>
</html>